<template>
	<view class="grid-wap u-m-b-10 u-flex u-flex-wrap u-col-center" v-if="list.length">
		<view
			v-if="(('/pages/app/merchant/peisong' == menu.path && userOtherData.is_dianyuan)
			 || ('/pages/app/merchant/index' == menu.path && userOtherData.is_store) 
			 || ('/pages/app/merchant/list' == menu.path && userOtherData.is_store) 
			 || ('/pages/app/merchant/lists' == menu.path && userOtherData.is_dianyuan)) 
			 || '/pages/app/merchant/index' != menu.path &&'/pages/app/merchant/lists' != menu.path &&'/pages/app/merchant/list' != menu.path &&'/pages/app/merchant/peisong' != menu.path"
			class="grid-item u-flex-col u-row-center u-col-center" v-for="(menu, index) in list" :key="index"
			@tap="jump(menu)">
			<image class="tool-img" :src="menu.image" mode="aspectFill"></image>
			<view class="item-title">{{ menu.name }}</view>
		</view>
	</view>
</template>

<script>
	/**
	 * shGrid-宫格列表
	 * @property {Array} list  - 宫格列表
	 */
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {};
		},
		computed: {
			...mapGetters(['isLogin', 'userInfo', 'userOtherData']),
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return [];
				}
			}
		},
		created() {},
		methods: {
			// 跳转门店
			goStore(path) {
				console.log(path)
				if (this.userOtherData.store_id) {
					uni.setStorageSync('storeId', this.userOtherData.store_id);
					this.jumps(path, {
						storeId: this.userOtherData.store_id
					});
				} else {
					console.log(uni.getStorageSync('storeId'))
					if (uni.getStorageSync('storeId')) {
						this.jumps(path);
					} else {
						if (path == '/pages/app/merchant/peisong') {
							this.jumps('/pages/app/merchant/lists', {
								type: 'peisong'
							});
						} else {
							this.jumps('/pages/app/merchant/list');
						}
					}
				}
				//  #ifdef MP-WEIXIN
				this.$store.commit('subscribeMessage', 'store');
				//  #endif
			},
			jumps(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			}, // 点击分享
			onShare() {
				this.$emit('onShare');
			},
			jump(data) {
				if ('分享' == data.name) {
					this.onShare();
				} else if ('/pages/app/merchant/index' == data.path || '/pages/app/merchant/peisongxxx' == data.path) {
					this.goStore(data.path);
				} else {
					this.$tools.routerTo(data.path);
				}
			}
		}
	};
</script>

<style lang="scss">
	// 宫格
	.grid-wap {
		background: #fff;
		width: 750rpx;
		border-radius: 10rpx;
		margin: 25rpx;
		width: 700rpx;
		padding: 30rpx 0 0;
		padding: 50rpx 0rpx 10rpx 0rpx;

		.grid-item {
			width: 25%;
			width: calc(100% / 3);
			margin-bottom: 50rpx;

			.tool-img {
				width: 44rpx;
				height: 44rpx;
				width: 70rpx;
				height: 70rpx;
			}

			.item-title {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				line-height: 24rpx;
				padding-top: 20rpx;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>